<html>
  <head>
    <title>Log2timeline Test Timeline</title>
    <link rel='stylesheet' href='http://www.simile-widgets.org/timeline/examples/styles.css' type='text/css' />

    <!-- ############################################################################ -->
    <!-- To use this file on your own system, replace ../../api/timeline-api.js with  -->
    <!--     http://api.simile-widgets.org/timeline/2.3.1/timeline-api.js          -->
    <!-- (where 2.3.1 is the current release number.)                                 -->
    <script src="http://api.simile-widgets.org/timeline/2.3.1/timeline-api.js?bundle=true" type="text/javascript"></script>

    <script src="http://www.simile-widgets.org/timeline/examples/examples.js" type="text/javascript"></script>
    <script>
        var tl;
        function onLoad() {
            var eventSource = new Timeline.DefaultEventSource();

            var zones = [
                {   start:    "Tue Aug 04 2009 00:00:00 GMT",
                    end:      "Tue Aug 04 2009 23:59:59 GMT",
                    magnify:  10,
                    unit:     Timeline.DateTime.DAY
                },
                {   start:    "Tue Aug 04 2009 12:00:00 GMT",
                    end:      "Tue Aug 04 2009 13:00:00 GMT",
                    magnify:  5,
                    unit:     Timeline.DateTime.HOUR
                }
            ];
            var zones2 = [
                {   start:    "Fri Jul 31 2009 00:00:00 GMT",
                    end:      "Fri Aug 07 2009 23:59:59 GMT",
                    magnify:  10,
                    unit:     Timeline.DateTime.WEEK
                },
                {   start:    "Tue Aug 04 2009 00:00:00 GMT",
                    end:      "Tue Aug 04 2009 23:59:59 GMT",
                    magnify:  5,
                    unit:     Timeline.DateTime.DAY
                },
                {   start:    "Tue Aug 04 2009 11:00:00 GMT",
                    end:      "Tue Aug 04 2009 11:10:00 GMT",
                    magnify:  5,
                    unit:     Timeline.DateTime.MINUTE,
                    multiple: 60
                },
                {   start:    "Tue Aug 04 2009 15:00:00 GMT",
                    end:      "Tue Aug 04 2009 16:00:00 GMT",
                    magnify:  3,
                    unit:     Timeline.DateTime.MINUTE,
                    multiple: 15
                }
            ];
            
            var theme = Timeline.ClassicTheme.create();
            theme.event.bubble.width = 250;
            
            var date = "Tue Aug 04 2009 15:10:00 GMT"
            var bandInfos = [
                Timeline.createHotZoneBandInfo({
                    width:          "80%", 
                    intervalUnit:   Timeline.DateTime.WEEK, 
                    intervalPixels: 220,
                    zones:          zones,
                    eventSource:    eventSource,
                    date:           date,
                    timeZone:       0,
                    theme:          theme
                }),
                Timeline.createHotZoneBandInfo({
                    width:          "20%", 
                    intervalUnit:   Timeline.DateTime.MONTH, 
                    intervalPixels: 200,
                    zones:          zones2, 
                    eventSource:    eventSource,
                    date:           date, 
                    timeZone:       0,
                    overview:       true,
                    theme:          theme
                })
            ];
            bandInfos[1].syncWith = 0;
            bandInfos[1].highlight = true;
            
            for (var i = 0; i < bandInfos.length; i++) {
                bandInfos[i].decorators = [
                    new Timeline.SpanHighlightDecorator({
                        startDate:  "Mon Jul 13 2009 12:30:00 GMT",
                        endDate:    "Wed Aug 5 2009 13:00:00 GMT",
                        color:      "#FFC080", // set color explicitly
                        opacity:    50,
                        startLabel: "Before",
                        endLabel:   "After",
                        theme:      theme
                    }),
                    new Timeline.PointHighlightDecorator({
                        date:       "Tue Aug 04 2009 15:10:00 GMT",
                        opacity:    50,
                        theme:      theme
                        // use the color from the css file
                    }),
                    new Timeline.PointHighlightDecorator({
                        date:       "Tue Aug 04 2009 15:20:00 GMT",
                        opacity:    50,
                        theme:      theme
                        // use the color from the css file
                    })
                ];
            }
            
            tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
            tl.loadXML("simile_visual.xml", function(xml, url) { eventSource.loadXML(xml, url); });
            
            setupFilterHighlightControls(document.getElementById("controls"), tl, [0,1], theme);
        }
        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        }
    </script>
  </head>
  <body onload="onLoad();" onresize="onResize();">
  
    <div id="header">
      <h1>Log2timeline SIMILE Visual Timeline</h1>
    </div>
  
    <div id="content">
      <p>This timeline is taken from a test case, created using a virtual machine and presented in a blog at the SANS forensic blog site. <br />
<a href="https://blogs.sans.org/computer-forensics/2009/08/13/artifact-timeline-creation-and-analysis-tool-release-log2timeline/" title="Part I">Part one of the blog - introduction to the case</a> <br />
<a href="https://blogs.sans.org/computer-forensics/2009/08/14/artifact-timeline-creation-and-analysis-part-2/" title="Part II">Part two of the blog - solving the case</a>
<br />
Another example of a timeline extracted from this case is <a href="/browser.html" title="Browsing history only">this example of a browser history timeline</a>
      </p>
      
      <p>Timeline version <span id='tl_ver'></span>.</p>
      <script>Timeline.writeVersion('tl_ver')</script>
    
      <div id="tl" class="timeline-default" style="height: 300px;"></div>
      
      <div class="footnotes">
          All times are in UTC 
      </div>
    
      <div class="controls" id="controls"></div>
    </div>

    <div id="footer">
      Copyright &copy; <a href="http://log2timeline.net">Log2timeline</a> and Kristinn Gudjonsson 2009 <br /> 
      Copyright &copy; <a href="http://web.mit.edu/">Massachusetts Institute of Technology</a> and Contributors 2006-2009 ~ Some rights reserved
    </div>
  </body>
</html>
